<script setup lang="ts">
import { ref } from "vue";

const isHovered = ref(false);
</script>
<template>
  <svg
    class="ai-icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1em"
    height="1em"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
  >
    <defs>
      <linearGradient id="flowGradient" x1="100%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#7b4ed8" />
        <stop offset="50%" stop-color="#a27def" />
        <stop offset="100%" stop-color="#c39dff" />
      </linearGradient>
    </defs>
    <path
      :class="['icon-path', { 'icon-path-hover': isHovered }]"
      d="M111.21095111 830.97423013c-28.47984197-10.87412148-44.01430124-23.30168889-65.24472889-52.81716149-17.08790518-23.30168889-18.12353581-27.96202667-18.1235358-64.20909827 0-35.7292563 1.55344592-40.90740939 18.64135111-67.31599012 22.26605827-33.65799506 148.09517827-158.45148445 179.16409678-178.12846617 37.28270222-22.78387358 66.2803595-30.0332879 112.36592199-27.96202667 69.38725136 3.10689185 88.54641778 15.01664395 190.03821827 117.02625976 92.17112494 92.68894025 103.04524642 109.77684543 103.04524641 158.45148444-0.51781531 57.99531457-50.74590025 113.40155259-109.77684543 120.13315159-37.28270222 4.14252247-65.24472889-4.14252247-101.49180049-31.58673381-65.76254419-49.71026963-126.86475061-51.26371555-177.61065087-5.69596841-10.87412148 9.83849086-26.92639605 21.74824297-36.2470716 26.92639605-23.30168889 11.9097521-69.90506667 14.49882864-94.76020148 5.1781531zM866.70348642 798.35186569c-51.78153086-12.42756741-49.71026963-10.35630617-150.16643951-110.81247606-94.24238617-93.20675555-107.70558419-110.29466075-120.65096691-148.09517827-10.87412148-33.65799506 12.42756741-93.72457086 47.12119309-120.65096691 33.65799506-26.40858075 95.2780168-34.69362569 131.52508839-17.0879052 23.81950419 11.3919368 197.28763259 186.93132642 212.82209185 215.4111684 8.80286025 16.57008987 11.3919368 30.0332879 11.3919368 57.99531457 0 32.10454914-2.07126124 39.35396347-16.57008988 62.13783703-18.12353581 26.92639605-49.71026963 51.78153086-71.4585126 55.92405334-7.24941431 1.55344592-17.6057205 3.62470717-23.30168889 5.1781531s-15.01664395 1.55344592-20.71261234 0zM473.16385185 416.2041679c-31.58673383-17.08790518-48.67463902-34.17581037-61.62002172-61.62002173-40.38959408-84.92171061 18.12353581-179.1640968 111.33029135-179.16409678 51.26371555 0 89.06423309 23.30168889 113.4015526 71.45851258 9.32067555 18.12353581 11.3919368 28.47984197 9.32067555 60.06657581-2.07126124 45.56774717-16.05227457 70.94069728-54.37060741 97.34927803-21.74824297 15.01664395-29.51547259 17.08790518-63.69128297 18.6413511-28.47984197 1.03563061-42.97867061-0.51781531-54.3706074-6.73159901z"
    />
  </svg>
</template>


<style scoped>
.ai-icon {
  cursor: pointer;
  position: relative;
}

.icon-path {
  fill: #a27def;
  transition: fill 0.3s ease;
}

.icon-path-hover,
.ai-icon:hover .icon-path {
  fill: url(#flowGradient);
}

@keyframes flowAnimation {
  0% {
    stop-color: #7b4ed8;
    stop-opacity: 0.7;
  }
  25% {
    stop-color: #9370db;
    stop-opacity: 0.9;
  }
  50% {
    stop-color: #a27def;
    stop-opacity: 1;
  }
  75% {
    stop-color: #b19ddb;
    stop-opacity: 0.9;
  }
  100% {
    stop-color: #c39dff;
    stop-opacity: 0.7;
  }
}

.ai-icon:hover #flowGradient stop:nth-child(1) {
  animation: flowAnimation 1s infinite alternate;
  animation-delay: 0s;
}

.ai-icon:hover #flowGradient stop:nth-child(2) {
  animation: flowAnimation 1s infinite alternate-reverse;
  animation-delay: 0.5s;
}

.ai-icon:hover #flowGradient stop:nth-child(3) {
  animation: flowAnimation 1s infinite alternate;
  animation-delay: 1s;
}

/* 添加流光效果 */
.ai-icon:hover .icon-path {
  filter: drop-shadow(0 0 2px rgba(123, 78, 216, 0.5));
  transition: all 0.5s ease;
}
</style>
